<template>
  <div class="w-full relative select-none" ref="banner">
    <img class="w-full" draggable="false" src="../../../assets/img/banner.jpg"/>
    <div class="absolute left-28 z-10 top-44 text-5xl text-white font-sans">
      <h3>MS-<span class="text-blue-600">AI</span> Lab</h3>
      <h3 class="mt-6 mb-3">
        <h3 class="tracking-widest">智能硬件实验系统</h3>
        <p class="w-20 h-1 bg-blue-700 mt-5 ml-2"></p>
      </h3>
      <h4 class="text-2xl mt-8">MS-X Lab Intelligent hardware experimental system</h4>
      <button @click="experienceItNow"
              class="mt-12 w-56 h-12 bg-gradient-to-r from-[#249CF4] to-[#0067DE] text-xl tracking-wider">立即体验
      </button>
    </div>
  </div>
</template>

<script lang="ts" setup>
const banner = ref()
const experienceItNow = () => {
  console.log()
  scrollTo({
    top: banner.value.offsetHeight,
    behavior: 'smooth'
  })
}
</script>

